<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue';

import { ElLock, ElUnLock } from '@vben/icons';
import { useAccessStore } from '@vben/stores';

import { ElButton } from 'element-plus';

import { router } from '#/router';

const menuLocked = ref(true);
const menuVisible = ref(true);
const activeMenu = ref('');
const accessStore = useAccessStore();

function toggleLock() {
  menuLocked.value = !menuLocked.value;
}

function handleMouseMove(e: MouseEvent) {
  if (e.clientY < 60 && !menuLocked.value) {
    menuVisible.value = true;
  } else if (!menuLocked.value) {
    menuVisible.value = false;
  }
}

function toggleMenu(menu: string) {
  activeMenu.value = activeMenu.value === menu ? '' : menu;
}

function handleCommand(command: string) {
  activeMenu.value = '';
  switch (command) {
    case 'basemap-editor': {
      router.push('/scene');
      break;
    }
    case 'basemap-manager': {
      router.push('/warmap');
      break;
    }
    case 'file': {
      router.push('/quick-start/data');
      break;
    }
    case 'history': {
      router.push('/historicalmap-browse');
      break;
    }
    case 'mtde': {
      router.push('/home');
      break;
    }
    case 'theme': {
      window.open(
        `http://${import.meta.env.VITE_GLOB_WAR_IP}/scene-preview?token=${accessStore.accessToken}&refreshToken=${accessStore.refreshToken}`,
        '_blank',
      );
      break;
    }
    case 'visualize': {
      window.open(
        `http://${import.meta.env.VITE_GLOB_WAR_IP}/theme?token=${accessStore.accessToken}&refreshToken=${accessStore.refreshToken}`,
        '_blank',
      );
      break;
    }
    case 'war-editor': {
      window.open(
        `http://${import.meta.env.VITE_GLOB_WAR_IP}/user/homepage?token=${accessStore.accessToken}&refreshToken=${accessStore.refreshToken}`,
        '_blank',
      );
      break;
    }
    case 'war-file': {
      window.open(
        `http://${import.meta.env.VITE_GLOB_WAR_IP}/user/myroom?token=${accessStore.accessToken}&refreshToken=${accessStore.refreshToken}`,
        '_blank',
      );
      break;
    }
    case 'war': {
      window.open(
        `http://${import.meta.env.VITE_GLOB_WAR_IP}/?token=${accessStore.accessToken}&refreshToken=${accessStore.refreshToken}`,
        '_blank',
      );
    }
  }
}

function handleClickOutside(e: MouseEvent) {
  const dropdowns = document.querySelectorAll('.select-wrapper');
  let isInside = false;
  dropdowns.forEach((el) => {
    if (el.contains(e.target as Node)) {
      isInside = true;
    }
  });
  if (!isInside) activeMenu.value = '';
}

onMounted(() => {
  window.addEventListener('mousemove', handleMouseMove);
  document.addEventListener('click', handleClickOutside);
});
onBeforeUnmount(() => {
  window.removeEventListener('mousemove', handleMouseMove);
  document.removeEventListener('click', handleClickOutside);
});
</script>

<template>
  <header class="top-menu" :class="[{ hidden: !menuVisible && !menuLocked }]">
    <div class="menu-container">
      <!-- 左侧菜单 -->
      <div class="left-menus">
      
        <div class="select-wrapper" style="display: flex; flex-direction: row;" @click="toggleMenu('platform')">
          <img src="/scence.png" style="width: 2.5rem ; height: 2.5rem;" />
          <ElButton class="fake-select" plain type="text"> 战例服务平台 </ElButton>
          <div v-if="activeMenu === 'platform'" class="dropdown-menu">
            <div class="dropdown-item" @click="handleCommand('mtde')">多时态数字地球</div>
            <div class="dropdown-item" @click="handleCommand('war')">战例编辑器</div>
          </div>
        </div>

        <div class="select-wrapper" @click="toggleMenu('breadth')">
          <ElButton class="fake-select" plain type="text"> 战例底图模块 </ElButton>
          <div v-if="activeMenu === 'breadth'" class="dropdown-menu">
            <div class="dropdown-item" @click="handleCommand('file')">底图资源管理</div>
            <div class="dropdown-item" @click="handleCommand('basemap-manager')">战例底图管理</div>
            <div class="dropdown-item" @click="handleCommand('history')">历史底图浏览</div>
            <div class="dropdown-item" @click="handleCommand('basemap-editor')">战例底图制作</div>
          </div>
        </div>

        <div class="select-wrapper" @click="toggleMenu('basemap')">
          <ElButton class="fake-select" plain type="text"> 战例编辑器模块 </ElButton>
          <div v-if="activeMenu === 'basemap'" class="dropdown-menu">
            <div class="dropdown-item" @click="handleCommand('war-file')">战例素材管理</div>
            <div class="dropdown-item" @click="handleCommand('war-editor')">战例编辑器</div>
          </div>
        </div>

        <div class="select-wrapper" @click="toggleMenu('theme')">
          <ElButton class="fake-select" plain type="text"> 战例主题服务 </ElButton>
          <div v-if="activeMenu === 'theme'" class="dropdown-menu">
            <div class="dropdown-item" @click="handleCommand('theme')">主题检索</div>
            <div class="dropdown-item" @click="handleCommand('visualize')">主题可视化</div>
          </div>
        </div>
      </div>

      <!-- 右侧功能：搜索、关于我们、锁定 -->
      <div class="right-tools">
        <input
          class="search-input"
          type="text"
          placeholder="搜索..."
        />
        <ElButton class="fake-select" plain type="text" @click="router.push('/about')">
          关于我们
        </ElButton>
        <ElButton
          @click="toggleLock"
          circle
          class="lock-button"
          :title="menuLocked ? '点击取消锁定' : '点击锁定菜单'"
        >
          <component :is="menuLocked ? ElLock : ElUnLock" />
        </ElButton>
      </div>
    </div>
  </header>
</template>


<style scoped>
.top-menu {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  height: 6%;
  padding: 10px 20px;
  color: white;
  background-color: rgb(23 24 27 / 85%);
  backdrop-filter: blur(6px);
  transition:
    top 0.3s ease,
    opacity 0.3s ease;
}

.top-menu.hidden {
  top: -100px;
  opacity: 0;
}

.menu-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.center-dropdowns {
  display: flex;
  flex: 1;
  gap: 10%;
  justify-content: center;
  height: 100%;
}

.fake-select {
  height: 100%;
  padding: 0 10px;
  font-size: 24px;
  color: white;
  height: 100%;
  background-color: rgb(23 24 27 / 85%);
}

.fake-select:hover {
  color: #fff;
    height: 100%;
  background-color: rgb(255 255 255 / 20%);
}

.select-wrapper {
  position: relative;
  height: 100%;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2000;
  min-width: 20%;
  margin-top: 4px;
  background-color: #2a2a2a;
  border: 1px solid #444;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
}

.dropdown-item {
  padding: 8px 14px;
  color: white;
  cursor: pointer;
  transition: background 0.2s;
}

.dropdown-item:hover {
  background-color: #808080;
}

/* 锁按钮 */
.lock-button {
  color: white;
  background-color: rgb(255 255 255 / 10%);
  border: none;
  transition: background-color 0.3s;
}

.lock-button:hover {
  background-color: rgb(255 255 255 / 20%);
}

.left-menus,
.center-menus,
.right-tools {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
}



.right-tools {
  gap: 12px;
}

.search-input {
  padding: 6px 12px;
  border-radius: 10px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  width: 160px;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.search-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.3);
}

</style>
